<template>
	<!-- 限时抢购 -->
	<view class="seckill-goods">
		<view class="limintedTimeDetail">
			<view class="limintedTimeDetail_title">
				<view class="x-f">
					<!-- <span class="title">新品促销</span> -->
					<image :src="Url+'index/ic-skillfont.png'" class="sekill-skill"></image>
					<uni-countdown v-if="skill.time" style="margin-left: 20upx;" color="#fff" background-color="#333333" :show-day="false" :hour="0" :minute="0" :second="skill.time"></uni-countdown>
				    <text v-else style="font-size: 22upx;margin-left: 20upx;">本场秒杀已结束</text>
				</view>
			</view>
			<view class="limintedTimeDetail_more" @tap="$emit('nav')">
				更多<i class="icon">&#xe637;</i>
			</view>
		</view>
		<view class="goods-box swiper-box x-f">
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
				<view v-for="(item, index) in skill.goods" :key="index" class="goods" @tap="$emit('detailTap',item,'0')">
					<view class="goods-view">
						<!-- <image src="../../static/image/index/ic-skill.png"></image> -->
						<view class="goods-mode">限时秒杀</view>
						<image :src="item.cover" class="goods-pic" mode="aspectFill"></image>
					</view>
					<view class="goods-font">
						<text class="goods-title">{{item.name}}</text>
						<view class="goods-price" v-if="item.show_price">￥{{item.show_price}}</view>
						<view class="goods-price" v-else></view>
						<view class="goods-line_price" v-if="item.price">{{item.price}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// import shActiveGoods from './sc-active.vue';
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
export default {
	props:{
		skill:{
			type:[Object,Array]
		}
	},
	components:{
		uniCountdown
	},
	data() {
		return {
			Url:this.Imgurl,
			time: {}, //倒计时
			swiperCurrent: 0,
			showActivity: true, //是否显示活动。
			dateInfo:{
				h:0,
				m:0,
				s:0,
			}
		};
	},
	created() {
		// let time = this.skill.time;
		// if(time){
		// 	this.getDuration(time*1000)
		// }
	},
	methods: {
		swiperChange(e) {
			this.swiperCurrent = e.detail.current;
		},
		getDuration(my_time) {
		  var hours = parseInt((my_time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		  var minutes = parseInt((my_time % (1000 * 60 * 60)) / (1000 * 60));
		  var seconds = parseInt(my_time % (1000 * 60)) / 1000;
		  // console.log('转换时间:', daysRound + '天', hoursRound + '时', minutesRound + '分', seconds + '秒');
		  this.dateInfo = {
			  h:hours,
			  m:minutes,
			  s:seconds
		  }
		},
	}
};
</script>

<style lang="scss">
// 今日必拼+限时抢购
.x-f{
		display: flex;
		align-items: center;
	}
.limintedTimeDetail {
		width: 100%;
		height: 60upx;
		background-color: #FFFFFF;
		// padding-left: 25upx;
		// padding-right: 15upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		// margin: 20upx 0;
		align-items: center;
		margin-bottom: 20upx;
		.sekill-skill{
			width: 124upx;
			height: 30upx;
		}
		.limintedTimeDetail_title {
			display: flex;
			color: #333333;
			font-size: 32upx;
			font{
				color: red;
			}
			.title-img{
				width: 60upx;
				height: 100%;
				padding:3% 0;
				box-sizing: border-box;
			}
			.limintedTimeDetail_Session{
				background: red;
				margin-left: 15upx;
				display: inline-block;
				padding: 3upx;
				box-sizing: border-box;
				height: 46upx;
				font-size: 24upx;
				.session_Hour{
					height: 46upx;
					line-height: 42upx;
					padding:2upx 5upx;
					color: #fff;
				}
			}
			.session_time{
				border: 2upx solid red;
				background:#f5fff4;
				height: 42upx;
				.uni-countdown{
					height: 35upx;
					background:#f5fff4;
					
				}
			}
		}
		.limintedTimeDetail_more {
			color: #999999;
			font-size:24upx;
			.icon {
				color: #999;
				line-height: 28upx;
				font-size: 24upx;
			}
		}
 }
.group-goods,
.seckill-goods {
	background: #fff;
	// margin: 20rpx;
	padding: 20rpx;
	overflow: hidden;
	.scroll-view_H{
		white-space: nowrap;
		// /deep/{
		// 	.uni-scroll-view{
		// 		overflow: auto !important;
		// 	}
		// 	.uni-scroll-view-content{
		// 	   display: flex;
		// 	   align-items: center;	
		// 	   padding-bottom: 20px;
		// 	}
		// }
		.goods{
			display: inline-block;
			width:220upx;
			margin-right:30upx;
			&-title{
				font-size: 24upx;
				color: #333333;
				height:30upx;
				line-height: 30upx;
				display: block;
				margin-top: 10upx;
				overflow: hidden;/*超出部分隐藏*/
				white-space: nowrap;/*不换行*/
				text-overflow:ellipsis;/*超出部分文字以...显示*/
			}
			&-price{
				font-size:20upx;
				color: #999999;
				text-decoration:line-through;
				margin: 18upx 0;
				height: 32upx;
			}
			&-line_price{
				font-size: 28upx;
				color: #FF2842;
				font-weight: bold;
				&::before{
					content: "￥";
					font-size: 20upx;
				}
			}
			&-view{
				background-color: #FEFCFC;
				width:220upx;
				height: 220upx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
			}
			&-mode{
				position: absolute;
				left:0;
				top: 10upx;
				width:100upx;
				height: 40upx;
				background: url('https://jy-shops.oss-cn-beijing.aliyuncs.com/client/image/add_images/skill-bg.png');
				background-repeat: no-repeat;
				background-size:100% 100%;
				font-size: 20upx;
				color: #ED772F;
				text-align: center;
				// line-height:40upx;
				z-index: 11;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			&-pic{
				width:100%;
				height: 100%;
				border-radius: 10upx;
			}
		}
	}
}
</style>
